<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性和侦听器</title>
</head>

<body>
    <div id="app">
        <!-- 实现一个购物车的功能
            1.数据初始化处理
            2.计算商品总价
            3.选着商品数量：当商品数量超过库存做提示
        -->
        <ul>
            <li v-for="(item, index) in car">
                商品名称:{{item.pname}} --- 商品价格:{{item.price}} --- 库存:{{item.stock}}
                数量:<input type="number" v-model="item.num" style="width: 30px;">
            </li>
            <li><strong>总价:{{calcSum}}</strong></li>
            <li v-html="warn()"></li>
            <li v-html="message"></li>
        </ul>
    </div>


<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    //1.实例vue
    new Vue({
        el: '#app',
        data: {
            car: [{
                    pname: 'Iphone 14',
                    price: 7999,
                    stock: 10,
                    num: 1
                },
                {
                    pname: '小米14',
                    price: 3599,
                    stock: 3,
                    num: 3
                },
            ],
            message:""
        },
        // methods：当方法中使用的数据发生改变,方法会自动调用
        methods: {
            // calcSum() {
            //     let sum = 0;
            //     this.car.forEach(item => {
            //         sum += item.price * item.num;
            //     });
            //     return sum;
            // }
            warn(){
                let message = "";
                this.car.forEach(item => {
                    if(item.num>item.stock){
                        message += `${item.pname}的库存超出限制`+ `</br>`
                    }
                });
                return message;
            }
        },
        // 计算属性：当方法中使用的数据发生改变,方法会自动调用
        computed: {
            calcSum() {
                let sum = 0;
                this.car.forEach(item => {
                    sum += item.price * item.num;
                });
                return sum;
            }
        },
        // 侦听器 专门用于侦听数据的变化,当数据发生变化会自动调用方法
        watch: {
            // 要侦听的数据:数组
            car:{
                handler(newvalue, oldvalue) {
                    this.message = "";
                    this.car.forEach(item => {
                        if (item.num > item.stock) {
                            this.message += `${item.pname}的库存超出限制`+`</br>`
                        }
                    });
                },
                deep:true //深度侦听器
            },
            // 基础类型的侦听,将侦听数据作为函数就可以了
            message(newvalue,oldvalue){
                console.info(newvalue,oldvalue);
            }
        }
    });
    // 方法和计算属性的区别:
    // 声明不一样  方法使用methods,计算属性使用computed, 
    // 调用方式不一样 调用方法时需要(),调用计算属性时不需要加()

    // 方法和侦听器的区别
    // 方法：方法中的任意数据发生了改变就会自动调用方法,可以调用,进行返回值
    // 侦听器：需要指定具体的侦听数据,只有被具体指定的侦听数据发生了改变才会触发,不能像方法那样去调用,而是靠vue自动触发
</script>
</body>
</html>